<template>
  <div class="z-render-app-box">
    <div class="tool-lis">
      <div class="tool-btn" @click="changeWH">
        修改宽高
      </div>
      <div class="tool-btn" @click="rotate90">
        旋转90°
      </div>
      <div class="tool-btn" @click="findByName">
        查找子元素
      </div>
      <div class="tool-btn" @click="refresh">
        定时刷新
      </div>
      <div class="tool-btn" @click="stopRefresh">
        停止刷新
      </div>
    </div>
    <div id="zrender-app" ref="zrender-app" style="width: 900px; height: 600px;">
      zrender
    </div>
  </div>
</template>
  
  <script>
  import {zrenderInit, getGroup, componentUser} from './app/index.js'
  export default {
    name: 'zrender-app',
    components: {},
    data () {
      return {
        getCircleConfig: {
          width: 400,
          height: 300
        },
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      getComponentUser () {
        const zRender = this.zRender

        var width = zRender.getWidth()
        var height = zRender.getHeight()

        if (this.$componentGroup) {
          zRender.remove(this.$componentGroup)
        }
        var group = getGroup()
        // group.draggable = true
        this.$componentGroup = group
        /**
         * 随机位置，创建2000个组件
         */
          for (let i = 0; i < 500; i++) {
          const name = '用户' + i
          const $componentUser = componentUser({
            x: 0,
            y: 0,
            text: name,
          })
          $componentUser.name = name
          $componentUser.attr('position', [Math.random() * width - 32, Math.random() * height - 96])
          // 添加鼠标拖动，移动组件位置
          $componentUser.draggable = true
          $componentUser.attr({
            scale: [0.25, 0.25]
          })
          // $componentUser.on('mousemove', (e) => {
          //   if (!this.$zRenderMousedown) {
          //     return false
          //   }
          //   const {offsetX, offsetY} = e
          //   // 获取局部点击位置
          //   const $localPosition = $componentUser.transformCoordToLocal(offsetX, offsetY)

          //   const [x = 0, y = 0] = $componentUser.position
          //   $componentUser.attr({
          //     position: [offsetX - (32 / 2), offsetY - (96 / 2)]
          //   })
          //   console.log('$componentUser', $componentUser, $localPosition)
          // })
          group.add($componentUser)
        }

        zRender.add(group)
      },
      init () {
        let zRender = this.zRender
        if (!this.zRender) {
          const dom = this.$refs['zrender-app']
          zRender = zrenderInit(dom)
          // 鼠标按下
          zRender.on('mousedown', (e) => {
            this.$zRenderMousedown = true
          })
          zRender.on('mouseup', (e) => {
            this.$zRenderMousedown = false
          })
          this.zRender = zRender
        }

        var width = zRender.getWidth()
        var height = zRender.getHeight()

        // 背景
        const $componentUser = componentUser({width, height, text: '用户01', zlevel: 9})
        zRender.add($componentUser)
        // $componentUser.configLayer(99)
        this.$componentUserUpdateWH = () => {
          // 宽高缩放
          $componentUser.attr({
            scale: [0.25, 0.25],
          })
          // 缩放动画
          $componentUser.animateTo({
            scale: [1, 1]
          }, 3000, 3000)
          console.log('$componentUser', $componentUser)
        }
        // 旋转90°
        this.$componentUserRotate90 = () => {
          // 旋转
          $componentUser.attr({
            scale: [0.5, 0.5],
            rotation: Math.PI / 2,
            // 保持原始位置
            position: [10, 10 + 32]
          })

          // 旋转动画
          // $componentUser.animateTo({
          //   rotation: 0
          // }, 3000, 3000)
        }

        console.log('zrender-app zRender', zRender)

        // 测试数据
        this.getComponentUser()
      },
      // 修改宽高
      changeWH () {
        const $componentUserUpdateWH = this.$componentUserUpdateWH
        $componentUserUpdateWH && $componentUserUpdateWH()
      },
      // 旋转90°
      rotate90 () {
        // this.changeWH()
        const $componentUserRotate90 = this.$componentUserRotate90
        $componentUserRotate90 && $componentUserRotate90()
      },
      // 查找子元素
      findByName () {
        const $componentGroup = this.$componentGroup
        const length = $componentGroup.childCount()
        // const zRender = this.zRender
        // 随机取2000以内的整数
        const i = Math.floor(Math.random() * length)
        const name = '用户' + i
        const $componentUser = $componentGroup.childOfName(name)
        // 层级置顶
        const zlevel = $componentUser.zlevel || 1
        $componentUser.attr('zlevel', zlevel + 1)
        const $updateColor = $componentUser.$updateColor
        $updateColor && $updateColor()
        console.log('$componentUser', $componentUser)
      },
      // 停止刷新
      stopRefresh () {
        this.$refreshTimer && clearInterval(this.$refreshTimer)
      },
      // 刷新，重新创建
      refresh () {
        this.stopRefresh()
        const zRender = this.zRender
        this.$refreshTimer = setInterval(() => {
          this.changeWH()
          // zRender.clear()
          // this.init()
          this.getComponentUser()
          // zRender.refresh()
        }, 1000)
      },

    },
  }
  </script>
  
  <style>
  .z-render-app-box .tool-lis {
    display: flex;
    gap: 4px 8px;
  }
  .z-render-app-box .tool-btn {
    cursor: pointer;
    user-select: none;
    padding: 2px 4px;
    border-radius: 4px;
    background: #eee;
  }
  </style>
  